<template>
    <div v-title data-title="码神之路-blog">
        <el-container>

            <el-main class="me-articles">
                <ArticleScrollPage></ArticleScrollPage>
            </el-main>

            <el-aside>
                <CardMe></CardMe>
                <card-tag :tags="hotTags"></card-tag>
                <card-article cardHeader="最热文章" :articles="hotArticles"></card-article>
                <card-archive cardHeader="文章归档" :archives="archives"></card-archive>
                <card-article cardHeader="最新文章":articles="newArticles"></card-article>

            </el-aside>

        </el-container>
    </div>
</template>

<script>
    import ArticleScrollPage from "../components/common/ArticleScrollPage";
    import CardMe from '@/components/card/CardMe.vue'
    import CardTag from '@/components/card/CardTag.vue'
    import CardArticle from '@/components/card/CardArticle'
    import CardArchive from '@/components/card/CardArchive'
    import {getHotTags} from '@/api/tag'
    import {getHotArticles,getNewArticles,getArchives} from '@/api/article'
    export default {
        name: 'Index',
        components: {
            ArticleScrollPage,
            CardMe,
            "card-tag":CardTag,
            "card-article":CardArticle,
            "card-archive":CardArchive
        },
        created(){
            this.getHotTags();
            this.getHotArticles();
            this.getNewArticles();
            this.getArchives();
        },
        data() {
            return {
                hotTags: [],
                hotArticles: [],
                newArticles: [],
                archives:[]
            }
        },
        methods:{
            getHotTags(){
                //发起http请求 请求后端的数据
                getHotTags().then((res)=>{
                    ////res.data = Result (success,msg,data)
                    if(res.data.success){

                        this.hotTags = res.data.data;
                    }else{
                        this.$message.error(res.data.msg);
                    }
                }).catch((err)=>{
                    this.$message.error("系统错误");
                }).finally(()=>{
                })
            },
            getHotArticles(){
                //发起http请求 请求后端的数据
                getHotArticles().then((res)=>{
                    ////res.data = Result (success,msg,data)
                    if(res.data.success){
                        this.hotArticles = res.data.data;
                    }else{
                        this.$message.error(res.data.msg);
                    }
                }).catch((err)=>{
                    this.$message.error("系统错误");
                }).finally(()=>{
                })
            },
            getNewArticles(){
                //发起http请求 请求后端的数据
                getNewArticles().then((res)=>{
                    ////res.data = Result (success,msg,data)
                    if(res.data.success){
                        this.newArticles = res.data.data;
                    }else{
                        this.$message.error(res.data.msg);
                    }
                }).catch((err)=>{
                    this.$message.error("系统错误");
                }).finally(()=>{
                })
            },
            getArchives(){
                //发起http请求 请求后端的数据
                getArchives().then((res)=>{
                    ////res.data = Result (success,msg,data)
                    if(res.data.success){
                        this.archives = res.data.data;
                    }else{
                        this.$message.error(res.data.msg);
                    }
                }).catch((err)=>{
                    this.$message.error("系统错误");
                }).finally(()=>{
                })
            },
        },

    }
</script>


<style scoped>

    .el-container {
        width: 960px;
    }

    .el-aside {
        margin-left: 20px;
    }

    .el-main {
        padding: 0px;
        line-height: 16px;
    }

    .el-card {
        border-radius: 0;
    }

    .el-card:not(:first-child) {
        margin-top: 20px;
    }
</style>
